<template>
	<view class="rule-list-wrap">
		<view class="list-box" v-if="list.length">
			<view class="list-item" v-for="item in list" :key="item.id">
				<view class="item-con">
					<view class="item-row">
						<text class="title">设备类型</text>
						<text class="value">{{item.iotType}}</text>
					</view>
					<view class="item-row">
						<text class="title">报警规则</text>
						<text class="value">{{item.rules}}</text>
					</view>
				</view>

				<view class="item-btns">
					<view class="item-btn item-btn-update" @click.stop="onUpdate(item.id)">修改</view>
					<view class="item-btn item-btn-delete" @click.stop="onDelete(item.id)">删除</view>
				</view>
			</view>

			<uni-load-more :status="status"></uni-load-more>
		</view>

		<view class="no-data" v-else>暂无数据！</view>

		<view class="btns">
			<view class="btn-add" @click.stop="onAdd">增加报警规则</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import basePath from "@/common/basePath.js"
	import {
		GetObjProperty,
		IsArray
	} from "@/common/common.js"

	const listData = [{
			id: "10",
			iotType: "土地墒情",
			rules: "温度>20°c，温度<30°c温度>20°c，温度<30°c温度>20°c，温度<30°c"
		},
		{
			id: "11",
			iotType: "土地墒情",
			rules: "温度>20°c，温度<30°c"
		},
		{
			id: "12",
			iotType: "土地墒情",
			rules: "温度>20°c，温度<30°c"
		},
		{
			id: "13",
			iotType: "土地墒情",
			rules: "温度>20°c，温度<30°c"
		},
		{
			id: "14",
			iotType: "土地墒情",
			rules: "温度>20°c，温度<30°c"
		},
		{
			id: "15",
			iotType: "土地墒情",
			rules: "温度>20°c，温度<30°c"
		},
		{
			id: "16",
			iotType: "土地墒情",
			rules: "温度>20°c，温度<30°c"
		},
	]

	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				status: 'more',
				page: 1,
				pageSize: 20,
				pageTotal: 0,
				list: [],
			}
		},
		onLoad() {
			uni.startPullDownRefresh()

			this.pullDownRefresh()
		},
		onShow() {
			let isRender = uni.getStorageSync("renderRuleList")

			if (isRender === "true") {
				uni.startPullDownRefresh()

				this.pullDownRefresh()

				uni.setStorageSync("renderRuleList", "false")
			}
		},
		onReachBottom() {
			if (this.page * this.pageSize < this.pageTotal) {
				this.page++;
				this.status = "loading";
				setTimeout(() => {
					this.getList()
				}, 200)
			}
		},
		onPullDownRefresh() {
			this.pullDownRefresh()
		},
		methods: {
			pullDownRefresh() {
				this.page = 1

				setTimeout(() => {
					this.getList(() => {
						uni.stopPullDownRefresh()
					})
				}, 100)
			},
			getList(callBack) {
				uni.request({
					url: `${basePath}/IotAlarmRule/pageQuery`,
					method: "GET",
					data: {
						page: this.page,
						pageSize: this.pageSize,
					},
					complete() {
						callBack && callBack()
					},
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							let data = GetObjProperty(resData, "data")
							let rows = IsArray(GetObjProperty(data, "rows"))

							this.pageTotal = GetObjProperty(data, "totalCount", 0)

							if (this.page == 1) {
								this.list = rows;
							} else {
								this.list = this.list.concat(rows);
							}
							if (this.page * this.pageSize >= this.pageTotal) {
								this.status = "noMore";
							}
						}
					}
				})
			},
			onAdd() {
				uni.navigateTo({
					url: './addRule/addRule'
				});
			},
			onUpdate(id) {
				uni.navigateTo({
					url: `./editRule/editRule?ruleId=${id}`
				});
			},
			onDelete(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该报警规则？',
					success: res => {
						if (res.confirm) {
							uni.request({
								url: `${basePath}/IotAlarmRule/del/${id}`,
								method: "DELETE",
								success: res => {
									let resData = GetObjProperty(res, "data")

									uni.showToast({
										icon: 'none',
										title: GetObjProperty(resData, "uiMsg")
									})

									if (resData.code === 200 && resData.success) {
										this.removeData(id)
									}
								}
							})
						}
					}
				});
			},
			removeData(id) {
				let removeIndex = null

				this.list.forEach((item, index) => {
					if (GetObjProperty(item, "id") === id) removeIndex = index
				})

				if (removeIndex !== null) this.list.splice(removeIndex, 1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.rule-list-wrap {
		width: 100%;

		.list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-bottom: 156rpx;

			.list-item {
				width: calc(100% - 120rpx);
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				box-shadow: 0 0 20rpx #DFE9ED;
				box-sizing: border-box;
				
				&:first-child {
					margin-top: 20rpx;
				}
				
				&:not(:last-child) {
					margin-bottom: 48rpx;
				}

				.item-con {
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					overflow: hidden;

					.item-row {
						display: flex;
						width: 100%;
						margin-bottom: 20rpx;

						.title {
							width: 120rpx;

							&::after {
								content: "：";
							}
						}

						.value {
							flex: 1;
							line-height: 36rpx;
							word-break: break-all;
						}
					}
				}

				.item-btns {
					display: flex;
					justify-content: flex-end;
					width: 100%;

					.item-btn {
						width: 96rpx;
						height: 50rpx;
						border-radius: 60rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 50rpx;
						text-align: center;

						&:not(:last-child) {
							margin-right: 30rpx;
						}

						&.item-btn-update {
							background-color: #2573B0;
						}

						&.item-btn-delete {
							background-color: #EB6767;
						}
					}
				}
			}
		}
		
		.no-data {
			width: 100%;
			margin-top: 200rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		
		.btns {
			position: fixed;
			bottom: 0;
			z-index: 2;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 156rpx;
			background-color: #FFFFFF;

			.btn-add {
				width: calc(100% - 120rpx);
				height: 96rpx;
				background-color: #2573B0;
				border-radius: 60rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
			}
		}
	}
</style>
